<template>
    <div
        style="display: inline-flex"
        :style="
            Object.assign(_style, {
                'background-image': 'url(' + conf.data + ')',
                'background-size': '100% 100%',
                'color': color,
                'width': (width ?? size) + 'rpx',
                'height': (height ?? size) + 'rpx'
            })
        "
        :class="_class"
    ></div>
</template>

<script lang="ts" setup>
import { reactive, watch, onUnmounted } from 'vue'
import { AntJson, AntName, type Ant } from './Ant'

const val = {
    [AntName]: AntJson
}

const props = defineProps({
    /**
     * 使用的库名称，如Ant
     */
    name: { default: 'Ant' as keyof typeof val },
    /**
     * 图标名称，如left
     */
    type: { default: 'plus' as Ant },
    /**
     * 图标大小
     */
    size: { default: '20' },
    /**
     * 图标大小-宽
     */
    width: { default: undefined },
    /**
     * 图标大小-高
     */
    height: { default: undefined },
    /**
     * 图标颜色，如:#000、['#fff','#000']
     */
    color: { default: undefined as any },
    /**
     * 样式
     */
    _class: { default: '' },
    /**
     * 样式
     */
    _style: { default: {} }
})

const w = watch(
    () => [props.type, props.color],
    () => {
        getData()
    }
)

onUnmounted(() => {
    w()
})

const svgToUrl = (url: string) => {
    var encoded = url
        .replace(/<!--(.*)-->/g, '')
        .replace(/[\r\n]/g, ' ')
        .replace(/"/g, `'`)
        .replace(/%/g, '%25')
        .replace(/&/g, '%26')
        .replace(/#/g, '%23')
        .replace(/{/g, '%7B')
        .replace(/}/g, '%7D')
        .replace(/</g, '%3C')
        .replace(/>/g, '%3E')
    let res = '"' + `data:image/svg+xml,${encoded}` + '"'
    return res
}

const conf = reactive({
    data: ''
})

const viewBoxStr = '#{viewBox}'
const viewBoxDefault = '0 0 1024 1024'
const str = {
    svg: [`<svg viewBox="${viewBoxStr}" version="1.1" xmlns="http://www.w3.org/2000/svg">`, '</svg>'],
    get0: (replacestr: string) => {
        return str.svg[0].replace(viewBoxStr, replacestr)
    },
    getPath: (param: { d: string; fill?: string }) => {
        return `<path d="${param.d}" fill="${param.fill ?? 'currentColor'}" />`
    }
}
const getData = () => {
    const sobj = (val as any)[props.name]
    if (!sobj) {
        return
    }
    let obj: any = sobj[props.type]
    if (!obj) {
        return
    }
    let res = ''
    if (typeof obj === 'string') {
        res = `${str.get0(viewBoxDefault)}<path d="${obj}" fill="currentColor" />${str.svg[1]}`
    } else {
        let objt: { d: string[]; fill: { [key: string]: number[] }; viewBox?: string } = obj
        res = str.get0(objt.viewBox ?? viewBoxDefault)
        const getFill = (fill: { [key: string]: number[] }, index: number) => {
            const fillkeys = Object.keys(fill)
            const colors = props.color

            for (let i = 0; i < fillkeys.length; i++) {
                const key = fillkeys[i]
                const nums = fill[key]
                if (nums.includes(index)) {
                    if (colors) {
                        if (Array.isArray(colors)) return colors[i] ?? colors[colors.length - 1]
                        return colors
                    } else {
                        return key
                    }
                }
            }

            return 'currentColor'
        }

        objt.d.forEach((item, index) => {
            res += str.getPath({
                d: item,
                fill: getFill(objt.fill, index)
            })
        })
        res += str.svg[1]
    }

    conf.data = svgToUrl(res)
}
getData()
</script>
